import React from 'react';
import {
  Row, Col, Button, Input, Menu, Dropdown, Icon, message, Modal
} from 'antd';

import MyIcon from '../../ued-demo/components/common/MyIcon/MyIcon';

const ButtonGroup = Button.Group;       //组合按钮

export default class Set extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Colvisible: false,       // 更改列显示
      Choice: false,
      Modal: false,
      Active: false,
      activeIndex: []
    };
  }

  handleVisibleChange = (flag) => {
    this.setState({Colvisible: flag});
  }

  _Choice = key => (e) => {
    this.setState({
      [key]: true
    });
  }
  _ModalShow = key => (e) => {
    this.setState({
      [key]: true
    });
  }

  _ModalHide(Modal) {
    this.setState({Modal});
  }

  _Active(index) {
    let list = this.state.activeIndex;

    if (list && list.length > 0 && list.includes(index)) {
      let _list = [];
      list.map((item) => {
        if (item != index) {
          _list.push(item)
        }
      });
      list = _list;
    } else {
      list.push(index)
    }


    this.setState({
      Active: !this.state.Active,
      activeIndex: list
    });
  }

  render() {
    let that = this;
    const error = () => {
      message.error('请先选择删除的标签', 3);
    };
    const warning = () => {
      message.warning('请至少选择两个标签', 4);
    };
    const menu = (
      <Menu>
        <Menu.Item key="1"><span onClick={error}>批量删除</span></Menu.Item>
        <Menu.Item key="2"><span onClick={warning}>合并标签</span></Menu.Item>
      </Menu>
    );
    const tagList = [
      {
        name: '我的选中效果加类名active',
        num: '10'
      },
      {
        name: '我是标签我是标签2',
        num: '888'
      },
      {
        name: '我是标签3333',
        num: '88'
      },
      {
        name: '我是标签4444',
        num: '88'
      },
      {
        name: '我是标签3333',
        num: '88'
      }
    ]
    return (
      <div>
        <h3 className="title-h3">标签管理</h3>
        {/*搜索*/}
        <div className="search-cont">
          <Row gutter={16}>
            <Col span="4">
              <Input placeholder="请输入标签名称" size="large"/>
            </Col>
            <div className="search-btncont search-btncontfr">
              <Button size="large" type="primary">搜索</Button>
            </div>
          </Row>
        </div>
        {/*列表按钮*/}
        <div className="search-cont2">
          <div className="btn-flex">
            <Button onClick={that._Choice("Choice")}>选择标签</Button>
            <div className="btn-flex-margin">
              <Button type="primary">批量删除</Button>
              <Button type="primary">合并标签</Button>
            </div>
          </div>
        </div>
        {/*tag*/}
        <div className="border-content">
          <Row gutter={16}>
            <Col span={1}>
              <span className="tag-cont">
                <a className="tag" onClick={that._ModalShow("Modal")}><Icon type="plus"/></a>
                <Modal
                  title="新增标签"
                  wrapClassName="vertical-center-modal modal-tag"
                  visible={this.state.Modal}
                  onCancel={() => this._ModalHide(false)}
                  width={320}
                  footer={
                    <div className="text-c"><Button type="primary">创建</Button></div>
                  }
                >
                  <div className="add-cont">
                        <Row gutter={16}>
                          <Col span={5} className="text-r">
                            <div className="ant-form-item-label"><label>标签名称</label></div>
                          </Col>
                          <Col span={19}>
                            <Input size="large" placeholder="请输入标签名字"/>
                          </Col>
                        </Row>
                      </div>
                </Modal>
              </span>
            </Col>
            <Col span={23}>
              {
                tagList.map((item, index) =>
                  <span
                    className={(that.state.activeIndex && that.state.activeIndex.length > 0 && that.state.activeIndex.includes(index)) ? "tag-cont active" : "tag-cont"}
                    onClick={() => this._Active(index)}>
                    <a className={this.state.Choice ? "tag dashed" : "tag"}>
                      {item.name}
                      <span className="grey">(
                        {item.num}
                        )</span>
                      <span className="caozuo">
                          <a href="#"><MyIcon type="edit-o"/></a>
                          <a href="#"><Icon type="delete"/></a>
                        </span>
                    </a>
                  </span>
                )
              }
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}
